<template>
  <div id="app">
    <h1>{{ name }}</h1>
    <p>
      <router-link to="/home">Home</router-link>
      <router-link to="/about">About</router-link>
    </p>
    <p>
      <Parcel :config="parcelConfig" :mountParcel="mountParcel" />
    </p>
    <button @click="handleClick">sayHello</button>
    <button @click="boardCast">倒车</button>
    <router-view></router-view>
  </div>
</template>

<script>
import Parcel from 'single-spa-vue/dist/esm/parcel';
import { mountRootParcel } from 'single-spa';
export default {
  components: {
    Parcel,
  },
  data() {
    return {
      parcelConfig: window.System.import("@jichen/navbar"),
      mountParcel: mountRootParcel
    }
  },
  name: 'App',
  props: ["name"],
  methods: {
    async handleClick() {
      let toolsModule = await window.System.import("@jichen/tools")
      toolsModule.sayHello('vue')
    },
    async boardCast () {
      let toolsModule = await window.System.import("@jichen/tools")
      toolsModule.sharedSubject.next("倒车")
    },
  },
  async mounted () {
    let toolsModule = await window.System.import("@jichen/tools")
    toolsModule.sharedSubject.subscribe(console.log)
  },
}
</script>

<style>
</style>
